import React from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import type { MenuProps } from 'antd';
import { IdcardOutlined, PieChartOutlined, SettingOutlined, ScheduleOutlined } from '@ant-design/icons';
import '../../../styles/Gml/attendance.scss'
const { Header, Sider, Content } = Layout;

interface P { }
function Attendance(props: P) {
    type MenuItem = Required<MenuProps>['items'][number];

    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children?: MenuItem[],
        type?: 'group',
    ): MenuItem {
        return {
            key,
            icon,
            children,
            label,
            type,
        } as MenuItem;
    }
    const navigate = useNavigate()
    const items: MenuProps['items'] = [
        getItem('考勤管理', '/index/attendance/attendance_manage', <IdcardOutlined />, [
            getItem('考勤组管理', '/index/attendance/attendance_manage/attendance_group_manage'),
            getItem('班次管理', '/index/attendance/attendance_manage/workforce_manage'),

        ]),
        getItem('考勤统计', '/index/attendance/attendance_statistic', <PieChartOutlined />, ),
        getItem('假期管理', '/index/attendance/holiday_manage', <ScheduleOutlined />),
        getItem('设置', '/index/attendance/attendance_setup', <SettingOutlined />)
    ];
    const onClick: MenuProps['onClick'] = (e) => {
        console.log('click ', e);
        navigate(e.key)
    };
    return (
        <div className='attendance'>
            <Layout>
              
                <Layout className='content'>
                    <Sider className='sider'>
                        <Menu
                            onClick={onClick}
                            style={{ width: 200 }}
                            defaultSelectedKeys={['/index/attendance/attendance_manage/attendance_group_manage']}
                            defaultOpenKeys={['/index/attendance/attendance_manage']}
                            mode="inline"
                            items={items}
                        />
                    </Sider>
                    <Content>
                        <Outlet />
                    </Content>
                </Layout>
            </Layout>


        </div>
    );
}

export default Attendance;